<template>
  <view class="good-list">
    <uni-list :border="false">
      <uni-list-item
        v-for="(item, index) in list"
        :key="index"
        clickable
        link
        style="border-radius: 10px; margin-bottom: 10px"
      >
        <template slot="body">
          <view class="u-cell-group" @click="navigateTo(item)">
            <view class="title-warp">
              <view class="left">
                <view
                  :class="item.type === 1 ? 'icon-xianxinglingdang' : 'icon-laba'"
                  class="iconfont"
                ></view>
                <view class="title">{{ item.title }}</view>
              </view>
              <view class="date">{{ item.createDate }}</view>
            </view>
            <view>{{ item.content }}</view>
            <view class="status">
              <u-tag
                :text="item.readStatus === 0 ? $t('未读') : $t('已读')"
                :type="item.readStatus === 0 ? 'warning' : 'success'"
                mode="light"
                size="mini"
              />
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  props: {
    list: {
      type: [Array],
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    navigateTo(item) {
      uni.navigateTo({
        url: '/pages/template/newsDetails/newsDetails',
        events: {
          see: (data) => {
            item.readStatus = 1
          }
        },
        success: (res) => {
          res.eventChannel.emit('props', { data: item })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.good-list {
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  width: 100%;

  .u-cell-group {
    font-size: 28rpx;
    color: #888;
    line-height: 55rpx;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;

    .title-warp {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .left {
        display: flex;

        .iconfont {
          font-size: 44rpx;
          color: #f1bd88;
          margin-right: 20rpx;
        }

        .icon-laba {
          color: #00aaff;
        }

        .title {
          font-weight: bold;
          color: #000;
        }
      }
    }

    .status {
      text-align: right;
    }

    .error-item {
      color: red;
    }
  }

  .slot-content {
    padding: 20rpx 30rpx;
  }
}
</style>
